import React from 'react';
import {Button, Radio} from 'antd';
const RadioGroup = Radio.Group;
import {WeaSearchGroup, WeaFormItem, WeaInput, WeaSelect, WeaInputNumber, WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import EType from './base/EType';
import ETitle from './base/ETitle';
import Content_Slide_detail from './Content_Slide_detail';

// 幻灯片
export default class Content_Slide extends React.Component {
    state = {
        eAutoScrollTime: this.props.eAutoScrollTime||1000,
        eChangeEffect: this.props.eChangeEffect.selected,
        eSmoothMoveTime: this.props.eSmoothMoveTime||1000,
        eNavDisplayPosition: this.props.eNavDisplayPosition,
        eSlideDetail: this.props.eSlideDetail,
        showTitle: this.props.showTitle || '0',
        fontSize: this.props.fontSize|| '16',
        showType: this.props.showType|| '1',
        eDisplayMode: this.props.eDisplayMode.selected,
        detailModalVisible: false
    };

    render() {
        const {eAutoScrollTime, eChangeEffect, eSmoothMoveTime, eNavDisplayPosition, eSlideDetail,
            detailModalVisible,eDisplayMode,showTitle, fontSize, showType} = this.state;
        let EAutoScrollTime = <div></div>;
        let EChangeEffect = <div></div>;
        let ESmoothMoveTime = <div></div>;
        let ENavDisplayPosition = <div></div>;
        let EModal2Detail = <div></div>;
        let EDisplayMode = <div></div>;
        if (this.props.eShareLevel == '2') {
            EAutoScrollTime = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@3qtnrq`} label={getLabel(26286, '自动滚动时间')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <div style={{width: '70px', marginRight: '10px', display: 'inline-block'}}><WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@vu1myq`} value={eAutoScrollTime} min={0} onChange={value => this.setState({eAutoScrollTime: value})}/></div>
                    <span>{getLabel(26287, '毫秒')}</span>
                </WeaFormItem>
            );

            EChangeEffect = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@idqk8i`} label={getLabel(26288, '切换效果')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@cy94dx`}
                        options={
                            this.props.eChangeEffect.options.map((item) => {
                                return {key: item.key, selected: false, showname: item.value};
                            })
                        }
                        value={eChangeEffect}
                        style={{width: '200px'}}
                        onChange={value => {
                            this.setState({eChangeEffect: value});
                        }}
                    />
                </WeaFormItem>
            );

            ESmoothMoveTime = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@are1n8`} label={getLabel(26289, '平滑移动时间')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <div style={{width: '70px', marginRight: '10px', display: 'inline-block'}}><WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@tkhpmk`} min={0} value={eSmoothMoveTime} onChange={value => this.setState({eSmoothMoveTime: value})}/></div>
                    <span>{getLabel(26287, '毫秒')}</span>
                </WeaFormItem>
            );

            let modal2Detail = <div></div>;
            if (detailModalVisible) {
                const detailProps = {
                    eSlideDetail: eSlideDetail,
                    showTitle: showTitle,
                    fontSize: fontSize,
                    showType:showType,
                    onOk: (eSlideDetail, showTitle, fontSize, showType) => {
                        this.setState({
                            eSlideDetail: eSlideDetail,
                            fontSize: fontSize,
                            showTitle: showTitle,
                            showType: showType,
                            detailModalVisible: false
                        });
                    },
                    onCancel: () => {
                        this.setState({
                            detailModalVisible: false
                        });
                    }
                };
                modal2Detail = <Content_Slide_detail ecId={`${this && this.props && this.props.ecId || ''}_Content_Slide_detail@4e3r2c`} {...detailProps}/>
            }

            EModal2Detail = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@c628x8`}  label={getLabel(19342, '详细设置')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@20hsjh`} style={{marginTop:5}} type="primary" size="small" onClick={() => this.setState({detailModalVisible: true})}>{getLabel(19342, '详细设置')}</Button>
                    {modal2Detail}
                </WeaFormItem>
            );

            ENavDisplayPosition = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@vu6qjx`} label={getLabel(386597, '导航显示位置')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <RadioGroup ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@lum264`} value={eNavDisplayPosition} onChange={e => this.setState({eNavDisplayPosition: e.target.value})}>
                        <Radio ecId={`${this && this.props && this.props.ecId || ''}_Radio@7gyk1r`} value="1">{getLabel(22986, '左')}</Radio>
                        <Radio ecId={`${this && this.props && this.props.ecId || ''}_Radio@q0k6dd`} value="2">{getLabel(22988, '右')}</Radio>
                        <Radio ecId={`${this && this.props && this.props.ecId || ''}_Radio@0w2jks`} value="3">{getLabel(23010, '下')}</Radio>
                    </RadioGroup>
                </WeaFormItem>
            );

            EDisplayMode = (
                 <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@57igq6`} label={getLabel(81763, '图片显示方式')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@681kvy`}
                        options={
                            this.props.eDisplayMode.options.map((item) => {
                                return {key: item.key, selected: false, showname: item.value};
                            })
                        }
                        value={eDisplayMode}
                        style={{width: '200px'}}
                        detailtype={3}
                        onChange={value => {
                            this.setState({eDisplayMode: value});
                        }}
                    />
                </WeaFormItem>
            );
        }

        
        return (
            <div>
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@p1ic2e`} title={getLabel(81711, '基本信息')} needTigger={true} showGroup={true}>
                    <EType ecId={`${this && this.props && this.props.ecId || ''}_EType@7b3eia`} ref="eType" value={this.props.eBaseName}/>
                    {this.props.eShareLevel == '2' ? <ETitle ecId={`${this && this.props && this.props.ecId || ''}_ETitle@ref4bp`} ref="eTitle" eid={this.props.eid} value={this.props.eTitle} {...this.props}/> : ''}
                    {EAutoScrollTime}
                    {EChangeEffect}
                    {ESmoothMoveTime}
                    {ENavDisplayPosition}
                    {EDisplayMode}
                    {EModal2Detail}
                </WeaSearchGroup>
            </div>
        );
    }

    getSaveValues() {
        return {
            eContentTitle: this.refs['eTitle'] ? this.refs['eTitle'].getSaveValues() : this.props.eTitle,
            eContentAutoScrollTime: this.state.eAutoScrollTime,
            eContentChangeEffect: this.state.eChangeEffect,
            eContentSmoothMoveTime: this.state.eSmoothMoveTime,
            eContentNavDisplayPosition: this.state.eNavDisplayPosition,
            eContentSlideDetail: this.state.eSlideDetail,
            showTitle: this.state.showTitle,
            fontSize: this.state.fontSize,
            showType: this.state.showType,
            eContenteDisplayMode: this.state.eDisplayMode,
        };
    }
}